<template>
  <div class="container">
    <el-collapse v-model="activeNames">
      <el-collapse-item :title="$language.local('Information')" name="1">
        <ul class="grid-2 pl-3 batch-info">
          <template v-for="(item, key) in addFormLables">
            <template v-if="key == 'contract'"></template>
            <li v-else :key="key" class="mb-1 pr-4">
              <div class="row">
                <div class="col-1 gray">{{ $language.local(key) }} ：</div>
                <div class="col-2 font-right">{{ addForm[key] }}</div>
              </div>
            </li>
          </template>
        </ul>
      </el-collapse-item>
      <el-collapse-item :title="$language.local('Contract details')" name="2">
        <upload-file
          :on-success="onSuccess"
          :show-file-list="false"
        ></upload-file>

        <xy-table :list="addForm.contract" :columns="contractKeys">
          <template #header> <span></span> </template>
          <template #operation>
            <el-table-column
              key="ope"
              :label="$language.local('操作')"
              width="126"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="deleteItem(scope.row)"
                >
                  {{ $language.local("删除") }}
                </el-button>
              </template>
            </el-table-column>
          </template>
        </xy-table>
      </el-collapse-item>
    </el-collapse>
    <div class="form-footer mt-1 pb-2">
      <el-button
        type="default"
        icon="el-icon-back"
        @click="$router.go(-1)"
        size="small"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
import API from "../../plugins/api";
export default {
  inject: ["reload"],
  data() {
    return {
      activeNames: ["1", "2"],
      addFormLables: "",
      contract: "",
      contractKeys: {
        Id: 2185,
        FileName: "新建 DOC 文档.doc",
        CreateDate: "2021-06-02T15:56:11",

        UpUserName: "高雄",
        Status: 1,
      },

      addForm: "",

      id: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let { api, id } = this.$route.query;
      console.log(id, api);
      if (!api || !id) {
        return this.$router.go(-1);
      }
      this.id = id;
      this.api = new API(api);
      let str = window.sessionStorage.getItem(this.api.entity);
      let formKeys = JSON.parse(str);
      if (formKeys) {
        this.addFormLables = formKeys;
      }
      console.log(formKeys);
      let response = await this.$http.get(`/api/Agentcontract/GetList/${id}`);
      console.dir(response);
      this.addForm = response.data.Data;
    },
    async onSuccess(e) {
      console.log(e);
      let query = {
        aid: this.id,
        FileName: e.docname,
        FilePath: e.docurl,
      };
      let response = await this.$http.post(this.api.up, null, query);
      this.addForm.contract = response.data.Data;
    },
    async deleteItem(item) {
      console.log(item);
      let result = await this.$confirm(
        `${this.$language.local("确认删除吗")}？`,
        this.$language.local("提示"),
        {
          confirmButtonText: this.$language.local("确定"),
          cancelButtonText: this.$language.local("取消"),
          type: "warning",
        }
      ).catch((err) => err);

      if (result === "confirm") {
        console.log(item);
        let id = item["id"] || item["ID"] || item["Id"];
        let response = await this.$http.delete(`${this.api.deleteById}/${id}`, {
          mid: item.MID,
        });
        console.log(response);
        // this.addForm.contract = response.data.Data;
        this.reload();
      } else {
        this.$message.info("已取消");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.batch-info {
  font-size: 1rem;
  li {
    &:nth-child(odd) {
      padding-right: 10rem !important;
    }
    &:nth-child(even) {
      padding-left: 2rem;
    }
  }
}
.container {
  padding-bottom: 6rem;
}
</style>
